// 2021.08.29，自定义实现的无限虚拟下拉列表，支持分页
// 待封装到组件库
import React, { useState, useEffect } from 'react'
import request from '../utils/request'
import ScrollComponent from './MyScrollList'
import randomList, { getPageData } from "../utils/randomList"
import "./MyScrollListTest.css"


// 滚动回调，继续请求数据
function onScrollCallback({pageSize, pageNum}) {
    return new Promise((resolve,reject) => {
        let { list } = getPageData(pageNum)
        console.log(`pageNum ${pageNum}: `, list)

        resolve(list)
    })
}

function MyScrollListTest() {

    const [list, setList] = useState([])

    useEffect(()=>{
        // http 请求测试
        // request({
        //     url: "http://192.168.199.187:1337/blogs"
        // }).then(({ data }) => {
        //     setList(data)
        // })

        // 随机数列表测试
        randomList({
            length: 1000,
            listName: "list"
        })

        let { list } = getPageData(1)

        setList(list)
    },[])



    return (
        <div className="scroll-box">
            {list.length > 0 && <ScrollComponent list={list} onScroll={onScrollCallback}/>}
        </div>
    )
}

export default MyScrollListTest
